<template>
  <div class="sign-in-subscribe-active-value">
    <c-title :text="`${custom_name}明细`"></c-title>
    <div class="header">
      <div class="box">
        <p class="left">当前{{custom_name}}</p>
        <p class="left value">{{signMember.usable}}</p>
        <div class="tips left" v-if="validity && validity.length!==0">您有{{validity.wait_repaid}}{{custom_name}}将于{{validity.validity_date}}过期</div>
      </div>
    </div>
    <van-tabs v-model="active" title-active-color="#F15353">
      <van-tab title="明细记录"></van-tab>
    </van-tabs>

    <template v-if="list && list.length!=0">
      <van-cell-group>
        <van-cell v-for="(item,i) in list" :key="i" title-style="text-align:left;font-size: .75rem;"
          value-class="value-class">
          <template #title>
            <span>{{item.source_name}}</span>
            <p class="time">{{item.created_at}}</p>
          </template>
          <template #default>
            <span>{{item.change_value}}</span>
            <p class="order-id" v-if="item.has_one_order">{{item.has_one_order.order_sn }} </p>
          </template>
        </van-cell>
      </van-cell-group>
    </template>
    <van-empty v-else description="暂无记录" />

  </div>
</template>

<script>
import { scrollMixin } from '../../utils/mixin';
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      list: [],
      validity: null,
      signMember: {},

      isLoadMore: true,
      current_page: 1,
      last_page: 1,
    };
  },
  activated() {
    this.initData()
    this.getData()
  },
  methods: {
    initData() {
      this.list = [];
      this.isLoadMore = true;
      this.current_page = 1;
      this.last_page = 1;
    },
    async getData() {
      let { result, msg, data: { validity, signMember, record, custom_name } } = await $http.get("plugin.sign-buy.frontend.asset-record.active-value");
      if (result == 0) return this.$toast(msg);
      this.list = record.data;
      this.current_page =  record.current_page;
      this.last_page =  record.last_page;
      this.validity = validity;
      this.signMember = signMember;
      this.custom_name = custom_name;
    },
   async getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      }
      let page = this.current_page + 1;
      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.asset-record.active-value-record",{page});
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(data.data);
      this.current_page =  data.current_page;
      this.last_page =  data.last_page;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-cell {
  justify-content: space-between;
  margin: 0.5rem 0;
  border-radius: 0.3125rem;
}

::v-deep .van-tabs__nav {
  background-color: unset !important;
}

::v-deep .van-cell-group {
  margin-top: 0.625rem;
  background-color: unset;
  padding: 0 0.5rem;
}

.sign-in-subscribe-active-value {
  padding-bottom: 1rem;

  .time {
    color: #989898;
  }

  .value-class {
    color: #080808;
    font-size: 0.75rem;
  }

  .header {
    padding: 0.5rem;
    color: #fff;
  }

  .box {
    position: relative;
    background-color: #ffad57;
    border-radius: 0.625rem;
    padding-top: 1.3125rem;
    padding-left: 1rem;
    padding-bottom: 4.3125rem;
  }

  .value {
    margin-top: 0.375rem;
    font-size: 1.125rem;
  }

  .left {
    text-align: left;
  }

  .tips {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 0.5625rem;
  }
}
</style>
